<template>
       <div class="spinner">
           <label class="img"></label>
           <span class="text">{{text||'加载中...'}}</span>
       </div>
</template>
<script>
    //用父组件的isShow去控制显示，子组件不做显示与否
  export default{
      data(){
          return{

          }
      },
      created(){

      },
      props:['text'],
      methods:{

      }
  }
</script>
<style lang="scss" scoped>
     .spinner{
         width:100px;
         height:30px;
         margin:5px auto;
         position:relative;
         text-align: center;
         .img{
             display:inline-block;
             width:30px;
             height:30px;
             background:url(./img/loading.gif) center no-repeat;
             background-size:contain;
             vertical-align: middle;
             /*animation:rotate 1s  infinite ease-in-out both;*/
         }
         .text{
             font-size:16px;
             color:#333;
         }
     }


 @keyframes rotate {
       0%{
           transform:rotate(0deg)
       }
     25%{
         transform:rotate(90deg)
     }
     50%{
         transform:rotate(180deg)
     }
     75%{
         transform:rotate(270deg)
     }
     100%{
         transform:rotate(360deg)
     }
 }
</style>